<template>
  <div class="history-view">
    <!-- 页面标题和操作区 -->
    <div class="page-header">
      <div class="header-actions">
        <div class="search-box">
          <div class="i-carbon-search absolute left-3 top-2.5 text-gray-400"></div>
          <input type="text" placeholder="搜索历史记录..." class="search-input" />
        </div>
        <button class="action-btn bg-gray-100">
          <div class="i-carbon-filter mr-2"></div>
          <span>筛选</span>
        </button>
      </div>
    </div>

    <!-- 历史记录分组：今天 -->
    <div class="history-section">
      <h3 class="history-section-title">今天</h3>
      <div class="history-list">
        <div v-for="(item, index) in todayHistory" :key="index" class="history-item">
          <div class="history-icon">
            <div class="i-carbon-video"></div>
          </div>
          <div class="history-content">
            <div class="history-title">{{ item.title }}</div>
            <div class="history-subtitle">{{ item.subtitle }}</div>
          </div>
          <div class="history-actions">
            <button class="redo history-action-btn">
              <div class="i-carbon-redo"></div>
            </button>
            <button class="history-action-btn more">
              <div class="i-carbon-overflow-menu-vertical"></div>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 历史记录分组：昨天 -->
    <div class="history-section">
      <h3 class="history-section-title">昨天</h3>
      <div class="history-list">
        <div v-for="(item, index) in yesterdayHistory" :key="index" class="history-item">
          <div class="history-icon">
            <div class="i-carbon-video"></div>
          </div>
          <div class="history-content">
            <div class="history-title">{{ item.title }}</div>
            <div class="history-subtitle">{{ item.subtitle }}</div>
          </div>
          <div class="history-actions">
            <button class="history-action-btn redo">
              <div class="i-carbon-redo"></div>
            </button>
            <button class="history-action-btn more">
              <div class="i-carbon-overflow-menu-vertical"></div>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-bar">
      <button class="danger-btn">
        <div class="i-carbon-trash-can mr-2"></div>
        清除历史记录
      </button>
      <button class="primary-btn">
        <div class="i-carbon-add mr-2"></div>
        开始新的转换
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  // 模拟的历史记录数据
  const todayHistory = ref([
    {
      title: '电影宣传片转换',
      subtitle: '4个文件 · MP4 → MKV, MP4, AVI · 今天 13:45'
    },
    {
      title: '家庭视频备份',
      subtitle: '12个文件 · MOV → MP4 · 今天 10:20'
    }
  ])

  const yesterdayHistory = ref([
    {
      title: '会议录像处理',
      subtitle: '1个文件 · MKV → MP4 · 昨天 16:30'
    },
    {
      title: '旅行视频集锦',
      subtitle: '8个文件 · 多种格式 → MP4 · 昨天 11:15'
    }
  ])
</script>

<style lang="scss">
  .history-view {
    height: 100%;
    padding: 1.5rem 2rem;
    overflow-y: auto;
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;

    @media (width <= 768px) {
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
    }
  }

  .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
  }

  .header-actions {
    display: flex;
    gap: 0.75rem;

    @media (width <= 480px) {
      flex-direction: column;
      width: 100%;
    }
  }

  .search-box {
    position: relative;
  }

  .search-input {
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    color: #4b5563;
    outline: none;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;

    @media (width <= 480px) {
      width: 100%;
    }

    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);
    }
  }

  .action-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #4b5563;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;

    &:hover {
      background-color: #f9fafb;
    }
  }

  .history-section {
    margin-bottom: 2rem;
  }

  .history-section-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #6b7280;
  }

  .history-list {
    overflow: hidden;
    background-color: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
  }

  .history-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;

    @media (width <= 480px) {
      flex-direction: column;
      gap: 0.75rem;
      align-items: flex-start;
    }

    &:last-child {
      border-bottom: none;
    }
  }

  .history-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1rem;
    color: #3b82f6;
    background-color: #e0f2fe;
    border-radius: 0.5rem;
  }

  .history-content {
    flex-grow: 1;
  }

  .history-title {
    font-weight: 500;
    color: #1f2937;
  }

  .history-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .history-actions {
    display: flex;
    gap: 0.5rem;
  }

  .history-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #6b7280;
    border-radius: 0.375rem;

    &:hover {
      background-color: #f3f4f6;
    }

    &.redo {
      color: #667eea;

      &:hover {
        background-color: rgb(102 126 234 / 10%);
      }
    }
  }

  .action-bar {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;

    @media (width <= 480px) {
      flex-direction: column;
      gap: 0.75rem;
    }
  }

  .primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 5px 15px rgb(102 126 234 / 30%);
      transform: translateY(-2px);
    }
  }

  .danger-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: #ef4444;
    background-color: white;
    border: 1px solid #fee2e2;
    border-radius: 0.5rem;

    &:hover {
      background-color: #fef2f2;
    }
  }
</style>
